<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>杨乐的个人简历</title>
    <script src="//at.alicdn.com/t/font_453880_buey06jqveave7b9.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="./static/css/index.css"/>
    <style>
        body.loading {
            overflow: hidden;
        }

        .loadingCover {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F0F0F0;
            z-index: 2;
        }

        .loadingCover::before,
        .loadingCover::after {
            content: ' ';
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 0;
            width: 0;
            border-radius: 50%;
            background-color: #7C7C7C;
            animation: 2s loadingSlideOut infinite linear;
        }

        .loadingCover::after {
            animation-delay: 1s;
        }

        @keyframes loadingSlideOut {
            0% {
                width: 0;
                height: 0;
            }
            100% {
                width: 10rem;
                height: 10rem;
                opacity: 0;
            }
        }
    </style>
</head>

<body class="loading">
<div class="loadingCover"></div>
<nav class="navBar">
    <div class="navBarInner clearFix">
        <div class="logo">
            <a href="/">
                <span class="RS">RS</span>card
            </a>
        </div>
        <ul class="navList">
            <li class="navItem">
                <a href="#info">关于</a>
            </li>
            <li class="navItem">
                <a href="#skill">技能</a>
            </li>
            <li class="navItem">
                <a href="#portfolio">作品</a>
            </li>
            <li class="navItem">
                <a href="#">博客</a>
            </li>
            <li class="navItem">
                <a href="#">联系方式</a>
                <ul class="navMenu">
                    <li><a href="#">手机</a></li>
                    <li><a href="#">固话</a></li>
                    <li><a href="#">邮箱</a></li>
                    <li><a href="#">GitHub</a></li>
                    <li><a href="#">知乎</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<div class="topBanner">
    <div class="cover"></div>
</div>
<section class="info hidden" id="info">
    <div class="infoCard clearFix">
        <div class="picture">
            <img src="./static/img/avatar.jpg" alt="照片">
        </div>
        <div class="profile">
            <div class="welcome">HELLO</div>
            <h1>杨乐</h1>
            <p>前端攻城狮</p>
            <hr>
            <dl>
                <dt>年龄</dt>
                <dd>28</dd>
                <dt>所在城市</dt>
                <dd>郑州</dd>
                <dt>邮箱</dt>
                <dd>youngleocn@qq.com</dd>
                <dt>电话</dt>
                <dd>18612345678</dd>
            </dl>
        </div>
    </div>
    <div class="infoFooter">
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-pinnedoctocat"></use>
            </svg>
        </a>
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-twitter"></use>
            </svg>
        </a>
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yingdaicon04"></use>
            </svg>
        </a>
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhihu"></use>
            </svg>
        </a>
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-windows8"></use>
            </svg>
        </a>
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-email-copy"></use>
            </svg>
        </a>
    </div>
</section>
<section class="downloadResume">
    <a href="#">下载 PDF 简历</a>
</section>
<section class="selfIntroduction">
    <p>
        杨乐：入门前端工程师。<br> 技能：前端开发、Node.js开发、Python开发。
    </p>
</section>
<section class="skill hidden" id="skill">
    <h1>
        技能
    </h1>
    <ul class="skillList clearFix">
        <li class="skill">
            <div class="skillName">HTML 5 & CSS 3</div>
            <hr class="percentBar percent60">
        </li>
        <li class="skill">
            <div class="skillName">JavaScript</div>
            <hr class="percentBar">
        </li>
        <li class="skill">
            <div class="skillName">jQuery</div>
            <hr class="percentBar">
        </li>
        <li class="skill">
            <div class="skillName">Vue.js</div>
            <hr class="percentBar percent20">
        </li>
        <li class="skill">
            <div class="skillName">React.js</div>
            <hr class="percentBar percent40">
        </li>
        <li class="skill">
            <div class="skillName">Node.js</div>
            <hr class="percentBar">
        </li>
    </ul>
</section>
<section class="portfolio hidden" id="portfolio">
    <h1>作品集</h1>
    <ol class="portfolioNav">
        <li class="portfolioTag" data-switch="portfolio1">所有</li>
        <li class="portfolioTag" data-switch="portfolio2">静态页面</li>
        <li class="portfolioTag" data-switch="portfolio3">SPA</li>
        <hr class="switchBar portfolio1">
    </ol>
    <div class="works">
        <img src="./static/img/works/1.jpg" class="works01" alt="Works01">
        <img src="./static/img/works/2.jpg" class="works02" alt="Works02">
        <img src="./static/img/works/3.jpg" class="works03" alt="Works03">
    </div>
</section>

<section class="portfolio hidden" id="comment">
    <h1>评论</h1>
    <form action="" method="post" id="addComments" class="clearFix">
        <div class="commentContent">
            <textarea name="content" cols="30" rows="2" placeholder="评论内容"></textarea>
        </div>
        <input type="text" name="userName" size="10" maxlength="20" placeholder="用户名">
        <input type="submit" value="提交">
    </form>
    <ul class="commentList">

    </ul>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/tween.js/17.1.1/Tween.min.js"></script>
<script src="//cdn1.lncld.net/static/js/3.5.0/av-min.js"></script>
<script src="./static/js/index.js"></script>
<script src="./static/js/comment.js"></script>
<script>
    setTimeout(function () {
        try {
            document.querySelector('div.loadingCover').remove();
        } catch (err_) {
        }
        document.body.classList.remove('loading');
    }, 2000);
</script>
</body>

</html>